<template>
  <div class="hanfu-knowledge-container">
    <div class="page-header">
      <h1 class="page-title">汉服知识图谱</h1>
      <p class="page-description">
        汉服，又称汉装、华服，是指汉族的传统服饰。起源于黄帝时期，历经数千年的发展演变，形成了独具一格的民族服饰体系。
      </p>
    </div>

    <div class="knowledge-categories">
      <div class="category-tabs">
        <el-tabs v-model="activeCategory" @tab-change="handleCategoryChange">
          <el-tab-pane
            v-for="category in categories"
            :key="category.id"
            :label="category.name"
            :name="category.id"
          >
            <div class="category-description">{{ category.description }}</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="knowledge-cards">
      <div class="cards-grid">
        <div
          v-for="card in filteredCards"
          :key="card.id"
          class="knowledge-card"
          @mouseenter="handleCardHover(card)"
          @mouseleave="hoveredCard = null"
        >
          <div class="card-image">
            <img :src="formatImageUrl(card.image)" :alt="card.title" />
            <div class="card-overlay">
              <span class="card-era">{{ card.era }}</span>
            </div>
          </div>
          <div class="card-content">
            <h3 class="card-title">{{ card.title }}</h3>
            <p class="card-brief">{{ card.brief }}</p>
          </div>

          <!-- 鼠标悬浮时显示的详情 -->
          <div
            v-if="hoveredCard && hoveredCard.id === card.id"
            class="card-details-popup"
          >
            <div class="popup-content">
              <h4>{{ card.title }}</h4>
              <p class="era-tag">{{ card.era }}时期</p>
              <div class="details-section">
                <h5>服饰特点</h5>
                <p>{{ card.features }}</p>
              </div>
              <div class="details-section">
                <h5>历史背景</h5>
                <p>{{ card.historical_background }}</p>
              </div>
              <div class="details-section">
                <h5>穿着场合</h5>
                <p>{{ card.occasions }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 知识图谱可视化部分 -->
    <div class="knowledge-graph-visualization">
      <h2 class="section-title">汉服演变图谱</h2>
      <div class="timeline">
        <div v-for="era in timeline" :key="era.id" class="timeline-item">
          <div
            class="timeline-marker"
            :class="{ active: activeEra === era.id }"
            @click="activeEra = era.id"
          >
            <span class="era-name">{{ era.name }}</span>
          </div>
        </div>
        <div class="timeline-line" />
      </div>

      <div v-if="activeEraDetails" class="era-details">
        <div class="era-header">
          <h3>{{ activeEraDetails.name }}汉服特点</h3>
          <p>{{ activeEraDetails.period }}</p>
        </div>
        <div class="era-content">
          <div class="era-image">
            <img
              :src="formatImageUrl(activeEraDetails.representativeImage)"
              :alt="activeEraDetails.name"
            />
          </div>
          <div class="era-description">
            <p>{{ activeEraDetails.description }}</p>
            <div class="feature-tags">
              <span
                v-for="(tag, index) in activeEraDetails.featureTags"
                :key="index"
                class="feature-tag"
                >{{ tag }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatImageUrl } from "@/utils/tools";
import { ref, computed, onMounted } from "vue";

// 分类数据
const categories = [
  {
    id: "all",
    name: "全部",
    description: "汉服包含多种类型和朝代风格，体现了中国传统服饰的文化底蕴和审美特征。",
  },
  {
    id: "type",
    name: "服饰类型",
    description: "按照用途和形制划分的汉服种类，如深衣、襦裙、袍服等。",
  },
  {
    id: "dynasty",
    name: "朝代风格",
    description: "不同朝代的汉服风格特点，展现各时期的美学追求与社会风貌。",
  },
  {
    id: "elements",
    name: "设计元素",
    description: "汉服的纹样、色彩、剪裁等设计元素，体现中国传统文化的独特审美。",
  },
];

// 时间线数据
const timeline = [
  { id: "pre-qin", name: "先秦" },
  { id: "han", name: "汉代" },
  { id: "wei-jin", name: "魏晋南北朝" },
  { id: "sui", name: "隋朝" },
  { id: "tang", name: "唐朝" },
  { id: "sui-tang", name: "隋唐" },
  { id: "song", name: "宋代" },
  { id: "ming", name: "明代" },
];

// 朝代详细信息
const eraDetails = {
  "pre-qin": {
    name: "先秦",
    period: "约公元前2100年-公元前221年",
    description:
      "先秦时期的汉服以深衣为代表，讲究礼制，以玄、黄、青、赤、白五色为基础色调，服饰形制较为朴素，但已有基本的衣冠制度。",
    representativeImage: "93ec87b1-ed54-4892-92b1-1c4e44992b10.webp",
    featureTags: ["深衣制度", "冠服等级", "左衽右衽", "交领", "玉佩"],
  },
  han: {
    name: "汉代",
    period: "公元前202年-公元220年",
    description:
      "汉代服饰博采百家，兼收并蓄，发展成熟。特点是衣袖宽大，交领右衽，色彩浓艳，刺绣精美，尤其是丝绸之路的开通，使得服饰材质更加丰富。",
    representativeImage:
      "https://img.alicdn.com/imgextra/i2/3024104354/O1CN01Pl4hIF1VzpQFIFccd_!!3024104354.jpg",
    featureTags: ["宽袖", "右衽", "绣花", "丝绸", "褒衣"],
  },
  "wei-jin": {
    name: "魏晋南北朝",
    period: "220年-589年",
    description:
      '魏晋南北朝时期服饰尚简，追求自然飘逸之美，流行"曳地长裙"和"广袖衫"，衣带绕身数匝，体现了"衣宽带松"的审美观念。',
    representativeImage:
      "https://img.alicdn.com/imgextra/i1/2597396387/O1CN014mNUza1OdolnHYgNa_!!2597396387.jpg",
    featureTags: ["飘逸", "长裙", "广袖", "衣宽带松", "竹林七贤"],
  },
  sui: {
    name: "隋朝",
    period: "581年-618年",
    description:
      "隋朝服饰继承了南北朝的风格，但更加规范化。男子多穿圆领袍，女子衣裙宽松，腰部束带，逐渐向唐代过渡。颜色以沉稳为主，用料考究。",
    representativeImage:
      "https://img.alicdn.com/imgextra/i3/2206668286035/O1CN01k00wC41Y4sbjhHO5g_!!2206668286035.jpg",
    featureTags: ["圆领袍", "宽松", "束腰", "内敛", "过渡时期"],
  },
  tang: {
    name: "唐朝",
    period: "618年-907年",
    description:
      "唐代服饰华丽奢靡，女性流行高腰襦裙、露额发髻，男子多穿宽袖袍服。色彩丰富大胆，纹饰华丽，反映了大唐盛世的繁荣和开放包容的文化氛围。",
    representativeImage: "cc1020a7-4b20-4a55-bb8a-7bffdeb58221.webp",
    featureTags: ["高腰襦裙", "露肩", "大袖", "明艳色彩", "胡风影响"],
  },
  "sui-tang": {
    name: "隋唐",
    period: "581年-907年",
    description:
      "唐代是中国传统服饰的鼎盛时期，以华丽宽大、色彩艳丽、造型多样为特点。女子流行高腰襦裙，男子常穿圆领袍，胡服的影响也使唐代服饰更加丰富多彩。",
    representativeImage:
      "https://img.alicdn.com/imgextra/i4/2206586607149/O1CN01K2kDDA1QS3STOiljN_!!2206586607149.jpg",
    featureTags: ["襦裙", "团花", "高腰", "开胸", "披帛"],
  },
  song: {
    name: "宋代",
    period: "960年-1279年",
    description:
      "宋代服饰风格趋向简朴清雅，女子服饰以窄袖、齐胸襦裙为主流，男子则多穿窄袖直裰和圆领袍，整体给人以含蓄典雅之感。",
    representativeImage:
      "https://img.alicdn.com/imgextra/i3/2205508593061/O1CN01vpoMYn1MLwmmKekAv_!!2205508593061.jpg",
    featureTags: ["窄袖", "直裰", "齐胸襦裙", "花钿", "雅致"],
  },
  ming: {
    name: "明代",
    period: "1368年-1644年",
    description:
      "明代是汉服发展的最后一个高峰期，制度严谨，形制完备。服饰以宽大、庄重为特点，男子常穿圆领袍、直裰，女子多穿马面裙、褙子等，绣工精致，纹样丰富。",
    representativeImage:
      "https://img.alicdn.com/imgextra/i2/2201504973841/O1CN01nOTiQJ1h5ErE0VKVO_!!2201504973841.jpg",
    featureTags: ["马面裙", "褙子", "圆领袍", "云肩", "补服"],
  },
};

// 卡片数据
const knowledgeCards = [
  {
    id: 1,
    category: "type",
    title: "祆裙",
    era: "先秦",
    image: "8c0b3f7e-04af-46c6-bc1c-04d46ec72741.webp",
    brief: '上下连缀的礼服，体现"天人合一"的哲学思想',
    features:
      "深衣是中国古代最基本的服装，上衣下裳相连，交领右衽，以丝带束腰，袖口宽大。寓意深远，集实用性与礼仪性于一体。",
    historical_background:
      '源于黄帝时期，《礼记》记载为"深衣者，制天地之象也"，体现了早期华夏民族的宇宙观和美学理念。',
    occasions: "适合日常穿着和祭祀、庆典等重要场合，是古代知识分子和官员的常见服饰。",
  },
  {
    id: 2,
    category: "type",
    title: "比甲",
    era: "汉唐",
    image: "7c738591-c948-4ab9-b731-61f6eeb24ccb.webp",
    brief: "上襦下裙的女性服饰组合，优雅端庄",
    features:
      "襦裙由上衣(襦)和下裙组成，唐代襦裙特点是高腰设计，裙腰高至胸部，配以披帛，色彩鲜艳，装饰丰富。",
    historical_background:
      "汉代已有雏形，唐代发展到鼎盛，是中国古代女性最常见的服饰形式之一，体现了古代女性的审美观和礼仪规范。",
    occasions: "适合正式场合和日常生活，根据装饰和材质不同可分为礼服和便装。",
  },
  {
    id: 3,
    category: "type",
    title: "披风",
    era: "明代",
    image: "4686668c-644c-4514-b42c-b7b638f81664.webp",
    brief: "明代常见的男性正式服装，庄重大气",
    features:
      "圆领对襟，宽袖大摆，通常以深色为主，前后和两肩绣有补子(方形刺绣图案)，用以表明官位等级。",
    historical_background:
      "明代规定文官武将必须穿着补服上朝，是最为规范和完备的官服体系之一。",
    occasions: "主要用于朝廷重要场合、祭祀和其他正式场合。",
  },
  {
    id: 4,
    category: "type",
    title: "长袄",
    era: "宋明",
    image: "39a2d54a-09a1-47fa-bab3-448a228e1a7d.webp",
    brief: "下摆呈弧形的华丽礼服，多用于重要场合",
    features:
      "交领右衽，宽袖，曲线形下摆，通常配以蔽膝和革带，装饰华丽，常绣有龙纹或其他吉祥图案。",
    historical_background:
      "宋代至明代是重要礼服，分九等，皇帝至普通官员各有规定，体现了严格的等级制度。",
    occasions: "用于朝会、祭祀、婚礼等最重要的礼仪场合。",
  },
  {
    id: 5,
    category: "dynasty",
    title: "霞披",
    era: "汉代",
    image: "5179bcce-4947-4a41-8aea-49e4ad46db36.webp",
    brief: "宽袍大袖，制度完备，丝路交流促进服饰发展",
    features: "以右衽为主，袖子宽大，衣长及地，使用丝麻等材质，色彩鲜明，刺绣工艺发达。",
    historical_background:
      "汉代开创丝绸之路，中西文化交流频繁，服饰文化兴盛，形成了较为完备的服饰体系。",
    occasions: "根据场合不同分为礼服、常服和戎服等多种类型，有严格的等级制度。",
  },
  {
    id: 6,
    category: "dynasty",
    title: "云肩",
    era: "唐代",
    image: "8ee964f6-d79e-40e8-bff1-c22087d46c48.webp",
    brief: "华丽开放，兼容并蓄，是汉服发展的巅峰",
    features:
      "女性流行高腰襦裙，露额发髻，男性多穿圆领袍和直裰，整体以丰满宽大为美，色彩鲜艳。",
    historical_background:
      "唐代是中国历史上最为开放包容的朝代之一，服饰融合了波斯、印度等多种文化元素，展现了大唐盛世的繁荣景象。",
    occasions:
      "从庙堂到市井，从皇室到平民，各阶层的服饰都极为丰富多彩，场合用途划分细致。",
  },
  {
    id: 7,
    category: "dynasty",
    title: "宝相花纹",
    era: "宋代",
    image: "a28933a4-580f-41dd-bb7b-3fc5cf4bb03e.webp",
    brief: "质朴雅致，文人气息浓厚，追求含蓄美",
    features:
      "与唐代相比更加简约，女性服饰常见窄袖短襦配齐胸襦裙，男性多穿窄袖直裰，色调素雅。",
    historical_background:
      '宋代文人士大夫阶层崛起，推崇"文以载道"的理念，服饰也体现了含蓄内敛的审美取向。',
    occasions: "士大夫阶层尤其注重日常服饰的文化品味，而非单纯的奢华装饰。",
  },
  {
    id: 8,
    category: "elements",
    title: "云肩",
    era: "明清",
    image: "49707831-e023-4315-8b4e-4ff5392797e4.webp",
    brief: "覆盖肩部的装饰性披肩，纹样精美",
    features:
      "呈圆形或方形，覆盖肩部和前胸后背，通常由丝绸制成，绣有精美的图案，如龙凤、花卉、吉祥纹样等。",
    historical_background:
      "明代开始流行，是女性服饰的重要配件，既有装饰性，也体现了社会地位和审美情趣。",
    occasions: "主要用于正式场合和喜庆节日，是女性华服的点睛之笔。",
  },
  {
    id: 9,
    category: "elements",
    title: "补子",
    era: "明代",
    image: "65b82824-5a84-439e-9c82-371c66c6f8a0.webp",
    brief: "官服上的方形刺绣标识，表明官阶",
    features:
      "方形刺绣布片，绣有动物或鸟类图案，文官用鸟(如仙鹤、锦鸡等)，武官用兽(如狮子、虎等)，图案不同代表不同品级。",
    historical_background:
      "明代洪武年间正式确立，是封建社会等级制度的直观体现，也是中国传统刺绣工艺的杰出代表。",
    occasions: "专用于官员朝服，是身份和地位的重要标志。",
  },
  {
    id: 10,
    category: "elements",
    title: "绣花鞋",
    era: "各朝代",
    image: "57dacc75-62a2-46c8-84ce-9d3d5106b519.webp",
    brief: "精美的手工刺绣布鞋，兼具美观与实用",
    features:
      "以精细刺绣为主要特色，鞋面绣有花鸟、人物等图案，鞋底多层手工缝制，造型秀美，色彩鲜艳。",
    historical_background:
      '汉代已有记载，宋代发展成熟，明清时期达到顶峰。体现了中国传统"巧手"文化和审美情趣。',
    occasions: "日常穿着和节日喜庆场合都适用，是传统服饰不可或缺的配件。",
  },
  {
    id: 11,
    category: "type",
    title: "褙子",
    era: "明代",
    image: "b934c2bc-4b59-4af8-bfcd-3f4b34f977ca.webp",
    brief: "明代女性常穿的无袖短背心，精美华丽",
    features:
      "无袖马甲式上衣，长度一般至腰部，前短后长，开襟，用于外套。常用锦缎、丝绸制作，装饰精美。",
    historical_background:
      "明代中晚期开始流行，是女性重要的外套，也是展示家庭富裕程度和刺绣工艺的重要载体。",
    occasions: "适合各种正式场合和日常生活，是明代女性服饰的特色之一。",
  },
  {
    id: 12,
    category: "type",
    title: "马面裙",
    era: "明代",
    image: "d9c662c0-e807-4175-8eb0-2cc2eed94afb.webp",
    brief: "百褶裙前部有装饰性方形布片",
    features:
      '裙子前方有一块方形布片称为"马面"，通常绣有精美图案。裙身多为百褶设计，裙长及地，展现婀娜多姿的女性美。',
    historical_background:
      "明代中晚期流行的女性裙装，体现了明代审美特点和工艺水平，也是女性贞节观念的体现。",
    occasions: "适合正式场合和节庆活动，是明代女性重要的礼服裙装。",
  },
  {
    id: 13,
    category: "type",
    title: "曲裾",
    era: "汉代",
    image: "b47144d1-8501-4ccf-9b7c-b60922bf2ae3.webp",
    brief: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    features: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    historical_background:
      "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    occasions: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
  },
  {
    id: 14,
    category: "type",
    title: "曲裾",
    era: "汉代",
    image: "46eb1060-fee0-42ee-a0dd-70ef8e452a8e.webp",

    brief: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    features: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    historical_background:
      "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    occasions: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
  },
  {
    id: 15,
    category: "type",
    title: "曲裾",
    era: "汉代",
    image: "72000414-022d-4aec-87f0-1e4dcfb0e918.webp",
    brief: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    features: "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
    historical_background:
      "曲裾是一种上衣下裳相连的服装，衣襟绕襟一周，衣裳相连，形成一个曲裾。",
  },
];

const activeCategory = ref("all");
const hoveredCard = ref(null);
const activeEra = ref("tang");

// 根据选择的分类过滤卡片
const filteredCards = computed(() => {
  if (activeCategory.value === "all") {
    return knowledgeCards;
  } else {
    return knowledgeCards.filter((card) => card.category === activeCategory.value);
  }
});

// 当前选中朝代的详细信息
const activeEraDetails = computed(() => {
  return eraDetails[activeEra.value];
});

// 处理分类切换
const handleCategoryChange = (categoryId) => {
  activeCategory.value = categoryId;
};

// 处理卡片悬停
const handleCardHover = (card) => {
  hoveredCard.value = card;
};

// 初始化
onMounted(() => {
  // 可以在这里加载其他数据或执行初始化操作
  activeEra.value = "tang"; // 默认选中唐代
});
</script>

<style scoped>
.hanfu-knowledge-container {
  padding: 30px;
  max-width: 1280px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 32px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

.page-title:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #c0392b;
  margin: 15px auto 0;
}

.page-description {
  max-width: 800px;
  margin: 0 auto;
  color: #666;
  line-height: 1.6;
  font-size: 16px;
}

.knowledge-categories {
  margin-bottom: 30px;
}

.category-description {
  padding: 15px 0;
  text-align: center;
  color: #666;
  font-size: 14px;
  max-width: 800px;
  margin: 0 auto;
}

.knowledge-cards {
  margin-bottom: 50px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.knowledge-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  position: relative;
}

.knowledge-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
  height: 220px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
}

/* 按比例显示背景 */
.card-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  z-index: 0;
}

.card-image img {
  z-index: 1;
  position: relative;
}

.knowledge-card:hover .card-image img {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 2;
}

.card-content {
  padding: 15px;
}

.card-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.card-brief {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 悬浮详情弹窗 */
.card-details-popup {
  position: absolute;
  top: -10px;
  left: 100%;
  width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  z-index: 100;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.popup-content {
  padding: 20px;
}

.popup-content h4 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: #333;
}

.era-tag {
  display: inline-block;
  padding: 2px 8px;
  background-color: #e9d8a6;
  color: #6a4c2a;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 12px;
}

.details-section {
  margin-bottom: 15px;
}

.details-section h5 {
  margin: 0 0 6px 0;
  font-size: 15px;
  color: #555;
  border-left: 3px solid #c0392b;
  padding-left: 8px;
}

.details-section p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

/* 知识图谱可视化 */
.knowledge-graph-visualization {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px dashed #e0e0e0;
}

.section-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
  color: #333;
}

.timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 40px 0;
  padding: 0 30px;
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #ddd;
  z-index: 1;
}

.timeline-item {
  position: relative;
  z-index: 2;
}

.timeline-marker {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-marker.active {
  background-color: #c0392b;
  border-color: #c0392b;
  transform: scale(1.3);
}

.era-name {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 14px;
  color: #666;
}

.timeline-marker.active .era-name {
  color: #c0392b;
  font-weight: 600;
}

.era-details {
  margin-top: 50px;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 25px;
}

.era-header {
  margin-bottom: 20px;
  text-align: center;
}

.era-header h3 {
  margin: 0 0 5px 0;
  font-size: 22px;
  color: #333;
}

.era-header p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.era-content {
  display: flex;
  gap: 30px;
}

.era-image {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.era-image img {
  max-width: 100%;
  max-height: 350px;
  border-radius: 8px;
  object-fit: contain;
  width: auto;
  height: auto;
}

.era-description {
  flex: 1;
}

.era-description p {
  margin: 0 0 20px 0;
  line-height: 1.7;
  color: #555;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-tag {
  padding: 4px 12px;
  background-color: #eee;
  border-radius: 20px;
  font-size: 12px;
  color: #666;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .era-image img {
    max-height: 300px;
  }
}

@media (max-width: 992px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .era-content {
    flex-direction: column;
  }

  .era-image {
    margin-bottom: 20px;
    flex: none;
    width: 100%;
  }

  .era-image img {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card-details-popup {
    left: 0;
    right: 0;
    width: auto;
    top: 100%;
    margin-top: 10px;
  }
}
</style>
